{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}


<div id="twy-slideshow">
  <div class="twy-slideshow" id="Slideshow-{{ section.id }}">
    <div class="page-width">
      <div class="slideshow_line">
        <div class="slider-slideshow">
          <div class="swiper-father">
            <div class="second_container">
             <div class="container2">
              <div class="swiper twy-slideshow-container2">
                <div class="swiper-wrapper">
                  {%- for block in section.blocks -%}
                  {%- case block.type -%}
                  {%- when 'image' -%}
                  <div class="swiper-slide">
                    <div class="multicolumn-card" data-swiper-parallax="-300">
                      <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"

                      {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                    >
                      {%- if block.settings.image != blank -%}
                        <img
                          srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                            {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                            {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                            {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                            {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                            {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                          src="{{ block.settings.image | img_url: '1500x' }}"
                          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                          alt="{{ block.settings.image.alt | escape }}"
                          loading="lazy"
                          width="{{ block.settings.image.width }}"
                          height="{{ block.settings.image.height }}"
                        >
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                      {%- endif -%}
                    </div>
                    <div class="swiper-card__info swiper-card__rte">
                      {%- if block.settings.text != blank -%}
                      <div class="rte">{{ block.settings.text }}</div>
                      {%- endif -%}
                    </div>
                    </div>
                  </div>
                 {%- endcase -%}
                 {%- endfor -%} 
                </div>
                <div class="swiper-button-next ten-vi slideshow_t">{% render 'swiper-next' %}</div>
                <div class="swiper-button-prev ten-vi slideshow_t">{% render 'swiper-prev' %}</div>
                         
              </div>
              <div class="scrollbar-container2">
                <div class="swiper-scrollbar slideshow_t" id="swiper-scrollbar1"></div>
              </div>   
             </div>
                <div thumbsSlider="" class="swiper twy-slideshow-container">
                  <div class="swiper-wrapper">
                    {%- for block in section.blocks -%}
                    {%- case block.type -%}
                    {%- when 'text' -%}
                       <div class="swiper-slide">
                        <div class="swiper-card__info">
                          {%- if block.settings.title != blank -%}
                          <div class="p">{{ block.settings.title }}</div>
                          {%- endif -%}
                         </div>
                       </div>
                    {%- endcase -%}
                    {%- endfor -%} 
                </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>

<script>
  var swiper = new Swiper(".twy-slideshow-container", {
    speed: 600,
    slidesPerView: 3,
    freeMode: true,
    watchSlidesProgress: true,
  });
  var swiper2 = new Swiper(".twy-slideshow-container2", {
    speed: 600,
    navigation: {
      nextEl: ".swiper-button-next.slideshow_t",
      prevEl: ".swiper-button-prev.slideshow_t",
    },
    scrollbar: {
      el: ".swiper-scrollbar.slideshow_t",
      hide: false,  
      draggable: true, 
      breakpoints: {
        1280: {
          dragSize: 218, 
          },
        750: {
          dragSize: 80, 
          },
      },
    },
    thumbs: {
      swiper: swiper,
    },
  });
</script>


{% schema %}

{

  "name": "Twy slideshow",
  "class": "spaced-section spaced-section--full-width cgo-slideshow",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "slideshow",
      "label": "slideshow"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Des"
        }
      ]
    },
    {
      "type": "text",
      "name": "text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "Column"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Twy slideshow",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}

{% endschema %}
